<template>
	<BasicLayout>
		<router-view :key="$route.fullPath" v-slot="{ Component }">
			<transition name="fade" mode="out-in">
				<component :is="Component" />
			</transition>
		</router-view>
	</BasicLayout>
	<Notivue v-slot="item">
		<Notification :item="item" />
	</Notivue>
</template>

<script lang="ts" setup>
	import { Notivue, Notification } from 'notivue'
	import BasicLayout from './layout/BasicLayout.vue'
</script>

<style scoped>
	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 0.5s;
	}

	.fade-enter,
	.fade-leave-to {
		opacity: 0;
	}
</style>
